<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <style type="text/css">
        .flex{
            display: flex;
            align-items: center;
        }
    </style>
    <th:block th:include="include :: header('修改作业-提交记录')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-submit-edit" th:object="${jobSubmit}">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="jobId" th:field="*{jobId}" type="hidden">
            <input name="classId" th:field="*{classId}" type="hidden">
            <input name="studentId" th:field="*{studentId}" type="hidden">
            <input name="groupId" th:field="*{groupId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">所属班级：</label>
                <div class="col-sm-8">
                    <input name="classId" th:field="*{className}" class="form-control" type="text" disabled>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">作答学生：</label>
                <div class="col-sm-8">
                    <input name="studentId" th:field="*{studentName}" class="form-control" type="text" disabled>
                </div>
            </div>
            <div class="layui-card" id="evaluateAbilityRelevanceCard">
                <div class="layui-card-header">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;font-weight: bold">
                        <legend>作业作答</legend>
                    </fieldset>
                </div>
                <div id="topic"></div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />

    <script th:inline="javascript">
        var prefix = ctx + "system/submit";
        Array.prototype.insert = function(index) {
            index = Math.min(index, this.length);
            arguments.length > 1
            && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
            && this.insert.apply(this, arguments);
            return this;
        };
        $("#form-submit-edit").validate({
            focusCleanup: true
        });

        var topicList

        var addSelectHtml;

        // 初始化题目数据
        (function () {
            topicList = [[${jobCourseClassList}]];
          let selectFlag = false;
          let currentIndex = 0;
            for (let i = 0; i < topicList.length; i++) {
                const item = topicList[i]
                console.log('addSelectHtml is',addSelectHtml)
                if (item.type === '选择题') {
                    console.log('item.option is', item.option, item.optionanswer)
                    if (selectFlag) {
                        addSelectHtml = addSelectHtml + item.option + ".<input type=\"radio\" name=\"topicRadio" + currentIndex + "selectAnswer\" value=\"" + item.option + "\"/><span class='layui-input'>" + item.optionanswer + "</span>\n"
                    } else {
                        selectFlag = true
                        currentIndex = item.index
                        addSelectHtml = item.option + ".<input type=\"radio\" name=\"topicRadio" + currentIndex + "selectAnswer\" value=\"" + item.option + "\"/><span class='layui-input'>" + item.optionanswer + "</span>\n"
                    }
                    item['youranswer'] = "topicRadio" + currentIndex + 'selectAnswer'
                } else if (item.type === '填空题') {
                    if (selectFlag) {
                        selectFlag = false
                        console.log('addSelectHtml is', addSelectHtml)
                        addSelectHtml = "<div id=\"topicItem" + currentIndex + "\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
                            "                <label class=\"col-sm-3 control-label\"> 第" + currentIndex + "题（选择题）：</label>\n" +
                            "                <div class=\"col-sm-8 flex\">\n" +
                            "                    <span class='layui-input'>" + topicList.filter(item => item.index === currentIndex)[0].title + "</span>" +
                            "<span class='layui-input' style='width: 150px'>(" + topicList.filter(item => item.index === currentIndex)[0].score + ")</span>" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "            <div class=\"flex\" style=\"padding:10px 30px;\">\n" + addSelectHtml
                        addSelectHtml += "</div></div>"
                        $("#topic").append(addSelectHtml)
                    }
                    var addSelectHtml = "<div id=\"topicItem" + item.index + "\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
                        "                <label class=\"col-sm-3 control-label\"> 第" + item.index + "题（填空题）：</label>\n" +
                        "                <div class=\"col-sm-8 flex\">\n" +
                        "                   <span class='layui-input'>" + item.title + "</span>" +
                        "                    <span class='layui-input' style='width: 150px'>(" + item.score + ")</span>" +
                        "                </div>\n" +
                        "            </div>\n"
                    addSelectHtml += "<div class=\"form-group\">\n" +
                        "                <label class=\"col-sm-3 control-label\">你的答案：</label>\n" +
                        "                <div class=\"col-sm-8\">\n" +
                        "                    <input name=\"topicName" + item.index + "blanksAnswer\" class=\"form-control\" type=\"text\">\n" +
                        "                </div>\n" +
                        "            </div></div>"
                    item['youranswer'] = "topicName" + item.index + 'blanksAnswer'
                    $("#topic").append(addSelectHtml)
                    addSelectHtml = ''
                } else if (item.type === '简答题') {
                    if (selectFlag) {
                        selectFlag = false
                        addSelectHtml = "<div id=\"topicItem" + currentIndex + "\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
                            "                <label class=\"col-sm-3 control-label\"> 第" + currentIndex + "题（选择题）：</label>\n" +
                            "                <div class=\"col-sm-8 flex\">\n" +
                            "                    <span class='layui-input'>" + topicList.filter(item => item.index === currentIndex)[0].title + "</span>" +
                            "<span class='layui-input' style='width: 150px'>(" + topicList.filter(item => item.index === currentIndex)[0].score + ")</span>" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "            <div class=\"flex\" style=\"padding:10px 30px;\">\n" + addSelectHtml
                        addSelectHtml += "</div></div>"
                        $("#topic").append(addSelectHtml)
                    }
                    var addSelectHtml = "<div id=\"topicItem" + item.index + "\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
                        "                <label class=\"col-sm-3 control-label\"> 第" + item.index + "题（简答题）：</label>\n" +
                        "                <div class=\"col-sm-8 flex\">\n" +
                        "                   <span class='layui-input'>" + item.title + "</span>" +
                        "                    <span class='layui-input' style='width: 150px'>(" + item.score + ")</span>" +
                        "                </div>\n" +
                        "            </div>\n"
                    addSelectHtml += "<div class=\"form-group\">\n" +
                        "                <label class=\"col-sm-3 control-label\">简答题答案：</label>\n" +
                        "                <div class=\"col-sm-8\">\n" +
                        "                    <input name=\"topicName" + item.index + "shortAnswer\" class=\"form-control\" type=\"text\">\n" +
                        "                </div>\n" +
                        "            </div></div>"
                    item['youranswer'] = "topicName" + item.index + 'shortAnswer'
                    $("#topic").append(addSelectHtml)
                    addSelectHtml = ''
                } else if (item.type === '文件上传题') {
                    if (selectFlag) {
                        selectFlag = false
                        addSelectHtml = "<div id=\"topicItem" + currentIndex + "\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
                            "                <label class=\"col-sm-3 control-label\"> 第" + currentIndex + "题（选择题）：</label>\n" +
                            "                <div class=\"col-sm-8 flex\">\n" +
                            "                    <span class='layui-input'>" + topicList.filter(item => item.index === currentIndex)[0].title + "</span>" +
                            "<span class='layui-input' style='width: 150px'>(" + topicList.filter(item => item.index === currentIndex)[0].score + ")</span>" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "            <div class=\"flex\" style=\"padding:10px 30px;\">\n" + addSelectHtml
                        addSelectHtml += "</div></div>"
                        $("#topic").append(addSelectHtml)
                    }
                    var addSelectHtml = "<div id=\"topicItem" + item.index + "\"><div class=\"form-group flex\" style='margin-top: 20px;'>\n" +
                        "                <label class=\"col-sm-3 control-label\"> 第" + item.index + "题（文件上传题）：</label>\n" +
                        "                <div class=\"col-sm-8 flex\">\n" +
                        "                   <span class='layui-input'>" + item.title + "</span>" +
                        "                    <span class='layui-input' style='width: 150px'>(" + item.score + ")</span>" +
                        "                </div>\n" +
                        "            </div>" +
                        " <div class=\"form-group\">\n" +
                        "                <div class=\"text-center\">\n" +
                        "                    <button type=\"button\" class=\"layui-btn\" id=\"test3\" value=\""+item.index+"\"><i class=\"layui-icon\"></i>上传文件</button>\n" +
                        "<span id=\"upload" + item.index + "\">" + item.youranswer + "</span>"+
                    "                </div>\n" +
                    "            </div>"
                    "</div>\n"
                    $("#topic").append(addSelectHtml)
                    addSelectHtml = ''
                }
            }
        })();


        $("#test3").click(function (index) {
            currentSelectJobId = this.value
            console.log('currentSelectJobIdset is', currentSelectJobId, this.value)
        })
        var enclosureUrl

        // 当前选中作业Index
        var currentSelectJobId

        // 课程目标表格组件
        layui.use(['table','layer','upload'], function () {
            var table = layui.table;
            var layer = layui.layer;
            upload = layui.upload;

            //指定允许上传的文件类型
            upload.render({
                elem: '#test3'
                ,url: ctx + 'common/upload' //改成您自己的上传接口
                ,accept: 'file' //普通文件
                ,done: function(res){
                    console.log('currentSelectJobId is',currentSelectJobId)
                    layer.msg('上传成功:'+ res.fileName);
                    enclosureUrl = res.fileName
                    for (let i = 0; i < topicList.length; i++) {
                        if(topicList[i].index == currentSelectJobId){
                            topicList[i].youranswer = enclosureUrl
                            $("#upload"+currentSelectJobId).text(enclosureUrl)
                            break
                        }
                    }
                }
            });
        });

        function submitHandler() {
            var saveData = {}
            // var evaluateAbilityRelevanceData = layui.table.cache.evaluateAbilityRelevanceId;
            // console.log('evaluateAbilityRelevanceData is', evaluateAbilityRelevanceData)
            // saveData.jobCourseClassList = evaluateAbilityRelevanceData
            var formData = $('#form-submit-edit').serializeArray()
            console.log('formData is', formData)
            saveData.jobCourseClassList = parseJob(formData)
            formData.map(item =>{
                saveData[item.name] = item.value
            })
            console.log('saveData is', saveData)

            if ($.validate.form()) {
                $.operate.saveJson(prefix + "/edit", JSON.stringify(saveData));
            }
        }

        function parseJob(formData) {
            const newTopList = []
            for (let i = 0; i < topicList.length; i++) {
                const item = topicList[i]
                console.log('item is', item)
                if(item.type === '选择题'){
                    item.youranswer = formData.filter(it =>it.name === item.youranswer)[0].value
                }else if(item.type === '填空题'){
                    item.youranswer = formData.filter(it =>it.name === item.youranswer)[0].value
                }else if(item.type === '简答题'){
                    item.youranswer = formData.filter(it =>it.name === item.youranswer)[0].value
                }else if(item.type === '文件上传题'){
                }
                newTopList.push(item)
            }
            console.log('newTopList is', newTopList)
            return newTopList;
        }
    </script>
</body>
</html>
